<template>
  <div class="is-link">
    <el-form-item :label="props.title">
      <div class="input-btn">
        <el-input class="input-link" v-model="linkValue"></el-input>
        <el-button size="large" @click="showLinkTabs = true"><i class="iconfont">&#xe678;</i></el-button>
      </div>
    </el-form-item>
    <LinkTabs :showLinkTabs="showLinkTabs" @closeTabs="closeTabs" @handleLink="handleLink"/>
  </div>
</template>

<script setup>
  import { ref,defineProps } from 'vue'

  const props = defineProps({
    title: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    }
  })
  const showLinkTabs = ref(false)
  const linkValue = ref(props.value)
  const closeTabs = () => {
    showLinkTabs.value = false
  }
  const handleLink = (url) => {
    linkValue.value.islink = url
  }

</script>

<style scoped>

</style>
